<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<%@ include file="common/head.jsp" %>
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',split:true" style="height:80px; font-size: 40px;padding:10px;">
    	EasyUi后台管理系统
    </div>   
    <div data-options="region:'south',split:true" style="height:30px; text-align:center;background: #E0ECFF" class="panel-title">
    	Copyright@XXXX有限责任公司
    </div>   
    <div data-options="region:'west',title:'导航菜单',split:true" style="width:240px;">
	    <div id="menu" class="easyui-accordion" style="" data-options="fit:true, border: false">   
			   
		</div> 
    </div>  
     
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
    	<div id="funcTab" class="easyui-tabs" style="width:100%;height:100%;" data-options="fit:true, border: false">   
		    
		</div>
    </div>  
    

    
</body>  
<script type="text/javascript">
$(function() {
	$.ajax({
		//在head.jsp中已经定义了ctx变量
		url: '${ctx}/moduleAction.action?methodName=getModules',
		
		//提交方式
		type: 'get',
		
		//参数，表示两为一个json对象
		data: {
			pid: -1
		},
		
		//响应数据的类型
		dataType: 'JSON',
		
		//请求成功后的回调函数
		success: function(data) {
			//循环结果集，动态生成菜单
			$.each(data, function(index, m) {
				
				$('#menu').accordion('add', {
    				title: m.text,
    				content:  '<ul id=' + m.id + ' alt=' + m.text + ' class="easyui-tree"></ul>', 
    				selected: false
    			});
				
				
			}); 
			
		},
		
		//请求失败的回调函数
		error: function(error) {
			console.log(error);
		}
		
	});
	
	//当用户点击一级菜单时，需要触发生成二级菜单
	$('#menu').accordion({
		onSelect: function(title,index) {
			let treeObj = $("ul[alt="+title+"]");
			let id = treeObj.attr("id");
			
			//如果已经加装了，则不用再次发请求到后台获取菜单数据
			if(treeObj.tree("getRoots").length > 0) return;
			
			//获取菜单数据
			treeObj.tree({
				url: '${ctx}/moduleAction.action?methodName=getModules',
				queryParams: {
					pid: id
				},
				//当树节点被点击时，打开一个功能选择卡
				onClick: function(node) {
					//如果已经打开则不再打开
					if($('#funcTab').tabs("exists", node.text)) 
						return;
					
					$('#funcTab').tabs('add',{    
					    title:node.text,    
					    content:'<iframe frameborder=0 src="' 
							+ node.url 
							+ '" scrolling="no" style="width:100%;height:100%;"></iframe>',
					    closable:true
					});
				}
			})
		}
	});
});
</script>
</html>